<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件化</title>
</head>
<body>
<h1>组件化结构</h1>
<div id="app">
    <!-- 1.需求 编辑一首静夜思 但是要求代码尽可能复用.
                 实现策略: 组件化思想
             2.组件化步骤:
                    1.定义组件
                        全局组件: 任意的DIV都可以引入该组件
                        局部组件: 只有特定的DIV可以引入组件
                    2. 编辑组件的key(注意驼峰规则的写法)
                         编辑组件体 特殊语法: 定义属性时 data(){return{ key:value}}
                         html标签: 使用template进行标记
                    3.通过key对组件进行引用.
     -->

    <!-- 1.组件标签的使用 放到app标签之内 才能解析
               2.如果采用驼峰规则命令则中间使用-线连接
       -->
    <hello-com></hello-com>
    <hello-com></hello-com>
    <hello-com></hello-com>
    <hello-hev></hello-hev>
</div>

<!-- 定义组件的模版html
         注意事项:
                1.切记标识在app之外!!!!
                2.要求模版字符串必须有根标签 div
-->
<template id="helloTem">
    <div>
        <h3>静夜思</h3>
        床前明月光，疑是地上霜。
        举头望明月，低头思故乡。
        引入属性{{msg}}}
    </div>
</template>

<template id="helloTeam">
<div>
    <h1>测试</h1>
</div>

</template>

<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
    /* 1.定义组件 */
    Vue.component("helloCom", {
        template: "#helloTem",
        // 定义属性必须添加
        data(){
            return{
                msg:"这是一个添加msg组件"
            }
        }
    })

    Vue.component("helloHev", {
        template: "#helloTeam",
        // 定义属性必须添加
        data(){
            return{
                msg:"这是一个添加msg组件"
            }
        }
    })


    const app = new Vue({
        el: "#app",
        data: {},
        methods: {}
    })
</script>
</body>
</html>
